<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
                class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
            <select name="city" lay-verify="required">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[write]" title="写作">
            <input type="checkbox" name="like[read]" title="阅读" checked>
            <input type="checkbox" name="like[dai]" title="发呆">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="checkbox" name="switch" lay-skin="switch">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>
    <!-- 加入日期选择 加入name=mydata 获取文本中的内容 -->
    <div class="layui-form-item">
        <label class="layui-form-label">选择日期</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="test1" name="mydate" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">封面</label>
        <div class="layui-input-block">
            <input type="file" name="poster" accept="image/*" required>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">轮播图</label>
        <div class="layui-input-block">
            <input type="file" name="swiper" accept="image/*" multiple>
        </div>
    </div>
    <!-- 文本域使用富文本编辑器 -->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
            <textarea id="demo" style="display: none;"></textarea>
        </div>
    </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    //Demo 引入多个组件 需要使用数组进行定义
    layui.use(['form', 'jquery', 'laydate', 'layedit', 'layer'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var layedit = layui.layedit;

        // 1.加入表单的验证
        form.verify({
            username: [
                /^[a-zA-Z]{6,12}$/,
                '用户名填写不规范'
            ]
        })
        // 2.加入日期选择
        laydate.render({
            elem: '#test1'//指定元素
        })


        // 配置图片的上传接口
        layedit.set({
            uploadImage: {
                url: '/admin/upload' //接口url
                , type: '' //默认post
            }
        });

        // 3.加入富文本编辑器

        var index = layedit.build('demo');//建立编辑器

        //监听提交
        form.on('submit(formDemo)', function (data) {
            try {

                // 获取编辑器中的值

                let content = layedit.getContent(index);
                // 保存index的值
                // console.log(content);


                // 获取所有input中为name=like的值

                let tempArr = [];

                $("input[name='like']:checked").each(function () {
                    let res = $(this).val();
                    // 打印每个like的值 并没有打印出
                    console.log(res);
                    tempArr.push(res);
                })

                // 封面
                let poster = $('input[name="poster"]')[0].files[0];


                // 轮播图
                let swiper = $("input[name='swiper']")[0].files;
                console.log(poster);
                console.log(swiper);
                // 输出表单中的值 data.field
                // 后端的前台控制台中打印的值
                // layer.msg(JSON.stringify(data.field));
                // console.log(data.field);

                let { title, city, password, sex, isShow, mydate } = data.field;

                isShow = isShow ? 1 : 0;
                // console.log(tempArr, title, city, password, sex, isShow, mydate);

                /*   //ajax
                  $.post('/admin/add-do', { content, mydate, title, city, password, sex, isShow, like: JSON.stringify(tempArr) }, res => {
                      // 从后台返回的信息res 对应ctx.body的内容
                      if (res == 'success') {
                          // 提示数据已经成功保存 前台提示
                          layer.msg('数据保存成功')
                          // 重置表单
                          $('form')[0].reset();
                          // 重置富文本编辑器
                          index = layedit.build('demo');
  
                      } else {
                          layer.msg('数据保存失败')
                      }
                  }) */
                let formData = new FormData();
                formData.append('content', content);
                formData.append('mydate', mydate)
                formData.append('title', title)
                formData.append('city', city)
                formData.append('password', password)
                formData.append('sex', sex)
                formData.append('isShow', isShow)
                formData.append('like', JSON.stringify(tempArr))
                formData.append('poster', poster)
                // 复杂数据类型不支持，需要分解
                for (let i = 0; i < swiper.length; i++) {
                    formData.append('swiper', swiper[i])

                }

                // ajax
                $.ajax({
                    url: '/admin/add-do',
                    method: 'post',
                    data: formData,
                    dataType: 'text',//希望后端返回的数据的格式
                    contentType: false,//不限制表单内容的类型
                    processData: false,//发送的数据 不进行序列化操作
                    beforeSend: function () {
                        console.log("数据发送前的操作");
                    },
                    // res后端返回的数据
                    success: function (res) {
                        if (res == 'success') {
                            // 提示数据已经成功保存
                            layer.msg('数据保存成功')
                            // 重置表单
                            $('form')[0].reset();
                            // 重置富文本编辑器
                            index = layedit.build('demo');

                        } else {
                            layer.msg('数据保存失败')
                        }
                    },
                    error: function (err) {
                        console.log(err);
                    }

                })

                // 阻止表单提交
                return false;
            } catch (err) {
                console.log(err);
                return false;
            }

        });

        form.render();
    });
</script>